{{extend elemLayout}}

{{block 'css'}}
<link rel="stylesheet" type="text/css" href="{{_res_path}}/game/wordle.css"/>
{{@style}}
{{/block}}

{{block 'main'}}
<div class="wordle">
    <div class="wordle-container">
        <div class="wordle-body">
            <table>
                <tbody>
                    {{set idx = 0 }}
                    <% for(let i=0; i< 6; i++){ %>
                    <tr>
                        <% for(let j=0; j< 5; j++){ %>
                            <% if(wordle.answer[idx] == 0){ %>
                                <td class="wordle-text">{{wordle.rawimg[idx]||" "}}</td>
                            <% } %>
                            <% if(wordle.answer[idx] == 1){ %>
                                <td class="wordle-text" style=" background-color: #3c3a3a;">{{wordle.rawimg[idx]||" "}}</td>
                            <% } %>
                            <% if(wordle.answer[idx] == 2){ %>
                                <td class="wordle-text" style=" background-color: #468132;">{{wordle.rawimg[idx]||" "}}</td>
                            <% } %>
                            <% if(wordle.answer[idx] == 3){ %>
                                <td class="wordle-text" style=" background-color: #b8b517;">{{wordle.rawimg[idx]||" "}}</td>
                            <% } %>
                            <% idx++ %>
                        <% } %>
                    </tr>
                    <% } %>
                </tbody>
            </table>
        </div>
    </div>
</div>
{{/block}}